
import './Mars3dMap.scss'

import * as mars3d from "mars3d"
import * as Cesium from "mars3d-cesium"

import { v4 } from 'uuid'
import PropTypes from 'prop-types'
import { useRequest } from 'alova'
import { useMount, useSetState, useRequest as throttleWait } from 'ahooks'
import { useEffect, useRef, useState } from 'react'
import { App, Spin, Tooltip, Popconfirm, Button, Collapse, Popover, Select } from 'antd'
import {
    EyeOutlined,
    EyeInvisibleOutlined,
    SlidersOutlined,
    CopyOutlined,
    DeleteOutlined,
    EditOutlined,
    StopOutlined,
    AimOutlined,
    UploadOutlined,
    CaretRightOutlined,
    FieldNumberOutlined
} from '@ant-design/icons'

import { Http } from '../Api'
import { DIvHtml } from './DIvHtml'
import { DrawerBox } from '../Model'
import { TilesEditor } from './TilesEditor'
import { Initialization, SetConfig } from './InitFunc'
import { UseConfigSection } from '../Template/FormTemplate'
import { toolbar, defaultParams, elementMapping, elementGrouping } from './Params'
import { Mars3DRender } from './Mars3dRender'

const divElementFun = (data) => {
    const { selectDome, selectText } = data
    return {
        ...data,
        html: DIvHtml[selectDome](selectText)
    }
}

const posiType = ['div', 'divBoderLabel', 'divUpLabel', 'divLightPoint']

const diffHeightType = [
    'wallP', 'diffuseWall', 'scrollWall', 'thickWall', 'polygonP',
    'rectangleP', 'regular', 'circleP', 'ellipse', 'sector',
    'straightArrow', 'fineArrow', 'fineArrowYW',
    'attackArrow', 'attackArrowPW', 'attackArrowYW',
    'gatheringPlace', 'doubleArrow'
]

const processing = (data, uuid, type, res, MapEvent) => {
    data[uuid].coordinates = posiType.includes(type) ? res.coordinate : res.coordinates
    if (diffHeightType.includes(type)) data[uuid].diffHeight = res.style.diffHeight
    if (type === 'circleP') data[uuid].radius = res.radius
    if (type === 'ellipse') {
        data[uuid].semiMajorAxis = res.style.semiMajorAxis
        data[uuid].semiMinorAxis = res.style.semiMinorAxis
    }
    if (type === 'sector') {
        data[uuid].radius = res.style.radius
        data[uuid].startAngle = res.style.startAngle
        data[uuid].endAngle = res.style.endAngle
    }
    if (type === 'regular') {
        data[uuid].radius = res.style.radius
        data[uuid].border = res.style.border
        data[uuid].startAngle = res.style.startAngle
    }
    if (type === 'boxP') {
        data[uuid].dimensions_x = res.style.dimensions_x
        data[uuid].dimensions_y = res.style.dimensions_y
        data[uuid].dimensions_z = res.style.dimensions_z
        data[uuid].heading = res.style.heading
        data[uuid].pitch = res.style.pitch
        data[uuid].roll = res.style.roll
    }
    if (type === 'cylinderP') {
        data[uuid].topRadius = res.style.topRadius
        data[uuid].bottomRadius = res.style.bottomRadius
        data[uuid].length = res.style.length
        data[uuid].slices = res.style.slices
        data[uuid].heading = res.style.heading
        data[uuid].pitch = res.style.pitch
        data[uuid].roll = res.style.roll
    }
    if (type === 'lightCone') {
        data[uuid].radius = res.style.radius
        data[uuid].height = res.style.height
    }
    if (type === 'ellipsoidP') {
        data[uuid].radii_x = res.style.radii_x
        data[uuid].radii_y = res.style.radii_y
        data[uuid].radii_z = res.style.radii_z
        data[uuid].innerRadii_x = res.style.innerRadii_x
        data[uuid].innerRadii_y = res.style.innerRadii_y
        data[uuid].innerRadii_z = res.style.innerRadii_z
        data[uuid].minimumClockDegree = res.style.minimumClockDegree
        data[uuid].maximumClockDegree = res.style.maximumClockDegree
        data[uuid].minimumConeDegree = res.style.minimumConeDegree
        data[uuid].maximumConeDegree = res.style.maximumConeDegree
        data[uuid].stackPartitions = res.style.stackPartitions
        data[uuid].slicePartitions = res.style.slicePartitions
    }
    if (type === 'pointLight') {
        data[uuid].intensity = res.style.intensity
        data[uuid].radius = res.style.radius
    }
    if (type === 'spotLight') {
        data[uuid].intensity = res.style.intensity
        data[uuid].radius = res.style.radius
        data[uuid].heading = res.style.heading
        data[uuid].pitch = res.style.pitch
        data[uuid].roll = res.style.roll
        data[uuid].innerCone = res.style.innerCone
        data[uuid].outerCone = res.style.outerCone
    }
    MapEvent.emit({ type: 'stopDraw', data: { obj: data, uuid } })
}

const modifyTileset = (Map, obj) => {
    const { uuid, ...data } = obj
    Map.getLayerById(uuid).setOptions(data)
}

export const Mars3dMap = ({ uuid, MapEvent }) => {
    Mars3dMap.propTypes = { uuid: PropTypes.string, MapEvent: PropTypes.object }
    const { message } = App.useApp()
    const MapBox = useRef()
    const { send: getData } = useRequest(() => Http({ url: 'getJsonInfoByUuid', params: { uuid: `scene/${uuid}` } }), { immediate: false })
    const { send: posData } = useRequest(params => Http({ url: 'posSaveJsonInfoBy', params, path: [`scene/${uuid}`] }), { immediate: false })
    const { send: getDetails } = useRequest(() => Http({ url: 'getJsonInfoByUuid', params: { uuid: `scene/${uuid}_Detail` } }), { immediate: false })
    const { send: posDetails } = useRequest(params => Http({ url: 'posSaveJsonInfoBy', params, path: [`scene/${uuid}_Detail`] }), { immediate: false })
    const { send: getGrouping } = useRequest(() => Http({ url: 'getJsonInfoByUuid', params: { uuid: `scene/${uuid}_Grouping` } }), { immediate: false })
    const { send: posGrouping } = useRequest(params => Http({ url: 'posSaveJsonInfoBy', params, path: [`scene/${uuid}_Grouping`] }), { immediate: false })
    const [Map, setMap] = useState()
    const [Gra, setGra] = useState()
    const [Clip, setClip] = useState()
    const [Element, setElement] = useState()
    const [Grouping, setGrouping] = useState()
    const [Editor, setEditor] = useState()
    const Init = (scene, data, gro) => {
        const { map, gra, clip } = Initialization(MapBox.current, scene, data)
        setMap(map)
        setGra(gra)
        setClip(clip)
        MapEvent.emit({ type: 'getScene', map, gra, clip, scene, data })
        MapEvent.emit({ type: 'getDetails', data, gro })
        MapEvent.emit({ type: 'closeDetails' })
    }
    const MarsScene = (data) => posData(JSON.stringify(JSON.stringify(data))).then(() => SetConfig(Map, Gra, Clip, data))
    const MarsCenterAt = (data) => Map.centerAt(data)
    const MarsGetCenter = (data) => {
        Map.expImage({ download: false, width: 192, height: 108 }).then(res => {
            const uuid = v4()
            MapEvent.emit({
                type: 'setCenter',
                data: {
                    centerList: { ...data.centerList, [uuid]: { center: Map.getCameraView(), image: res.image } },
                    defaultCenter: data.defaultCenter || uuid,
                }
            })
        })
    }
    const Details = (data) => {
        posDetails(JSON.stringify(JSON.stringify(data))).then(() => {
            setElement(data)
            message.success('保存成功')
            MapEvent.emit({ type: 'getDetails', data, gro: Grouping })
        })
    }
    const AddDetails = (data) => {
        const { obj, uuid, key } = data
        Grouping[key].children.push(uuid)
        posGrouping(JSON.stringify(JSON.stringify(Grouping))).then(() => Details(obj))
    }
    const ImportElement = (data) => {
        const { obj, uuid, key } = data
        Grouping[key].children.push(uuid)
        posGrouping(JSON.stringify(JSON.stringify(Grouping))).then(() => {
            Details(obj)
            Mars3DRender({ map: Map, gra: Gra, data: { [uuid]: obj[uuid] } })
        })
    }
    const StartDraw = (data) => {
        if (data.type === 'div') data.style.html = DIvHtml[data.style.selectDome](data.style.selectText)
        Gra.startDraw(data).then(res => {
            Gra.stopDraw()
            processing(Element, data.id, data.type, res, MapEvent)
        })
    }
    const StartEditing = (data) => {
        Gra.startEditing(Gra.getGraphicById(data))
    }
    const StopEditing = (uuid) => {
        const { type } = Gra.getGraphicById(uuid)
        Gra.stopEditing()
        delete Element[uuid]?.coordinates
        processing(Element, uuid, type, Gra.getGraphicById(uuid), MapEvent)
    }
    const PosDetails = (obj) => {
        const { data, uuid } = obj
        const { type } = data[uuid]
        if (type === 'kml') Map.getLayerById(uuid).setOptions({ symbol: { styleOptions: data[uuid] } })
        else if (type === 'tileset') modifyTileset(Map, data[uuid])
        else Gra.getGraphicById(uuid).setOptions({ style: data[uuid].type === 'div' ? divElementFun(data[uuid]) : data[uuid] })
        Details(data)
    }
    const IsEnable = (data) => {
        const { obj, uuid } = data

        console.log(data)

        Gra.getGraphicById(uuid).setOptions({ show: obj[uuid].isEnable })
        Details(obj)
    }
    const DelDetail = (obj) => {
        const { data, uuid, key } = obj
        const { type } = data[uuid]
        if (type === 'kml' || type === 'tileset') Map.removeLayer(Map.getLayerById(uuid))
        else Gra.removeGraphic(Gra.getGraphicById(uuid))
        delete data[uuid]
        Grouping[key].children = Grouping[key].children.filter(v => v !== uuid)
        posGrouping(JSON.stringify(JSON.stringify(Grouping))).then(() => Details(data))
    }
    const CopyDetails = (data) => {
        const newU = v4()
        const { obj, uuid, key } = data
        const newObj = { ...obj[uuid], title: obj[uuid].title + '-copy', uuid: newU }
        delete newObj.coordinates
        Grouping[key].children.push(newObj.uuid)
        posGrouping(JSON.stringify(JSON.stringify(Grouping))).then(() => Details({ ...obj, [newU]: newObj }))
    }
    const LocationAt = (uuid) => {
        const { type } = Element[uuid]
        if (type === 'kml' || type === 'tileset') {
            Map.flyToGraphic(Map.getLayerById(uuid))
        } else {
            if (Gra.getGraphicById(uuid)) Map.flyToGraphic(Gra.getGraphicById(uuid))
            else message.info('该元素还未绘制')
        }
    }
    const AddKml = (obj) => {
        const { data, uuid, key } = obj
        const { uuid: id, url, title, isEnable, ...styleOptions } = data[uuid]
        Map.addLayer(new mars3d.layer.KmlLayer({
            id,
            url,
            symbol: { styleOptions },
            show: isEnable,
            attr: title,
            flyTo: true
        }))
        Grouping[key].children.push(uuid)
        posGrouping(JSON.stringify(JSON.stringify(Grouping))).then(() => Details(data))
    }
    const AddTileset = (obj) => {
        const { data, uuid, key } = obj
        let tileset
        const { uuid: id, title: name, isEnable: show, type: popup, isCenter, ...tilesetData } = data[uuid]
        const { lng, lat, alt } = Map.getCenter()
        const tilesetOptions = { id, name, show, popup, ...tilesetData, flyTo: true }
        if (isCenter === 1) tileset = new mars3d.layer.TilesetLayer({ ...tilesetOptions, position: { lng, lat, alt } })
        else tileset = new mars3d.layer.TilesetLayer(tilesetOptions)
        Map.addLayer(tileset).then(() => {
            const { orginCenterPoint, rotation } = Map.getLayerById(uuid)
            const { lng, lat, alt } = orginCenterPoint
            data[uuid].rotation = rotation
            data[uuid].position = { lng, lat, alt }
            Grouping[key].children.push(uuid)
            posGrouping(JSON.stringify(JSON.stringify(Grouping))).then(() => Details(data))
        })
    }
    const TilesEditorSta = (uuid) => {
        const editor = new TilesEditor({ map: Map })
        const { boundingSphere, rotation_z, position } = Map.getLayerById(uuid)
        editor.range = boundingSphere.radius * 0.9
        editor.heading = rotation_z
        editor.position = position
        editor.enabled = true
        editor.on('change', e => modifyTilesPosition(e, uuid))
        setEditor(editor)
    }
    const { run: modifyTilesPosition } = throttleWait(async data => new Promise(resolve => resolve(data)), {
        throttleWait: 100,
        manual: true,
        onSuccess: (res, pos) => {
            const [, uuid] = pos
            let oldTileset = JSON.parse(JSON.stringify(Element[uuid]))
            delete oldTileset.uuid
            delete oldTileset.title
            delete oldTileset.isEnable
            delete oldTileset.type
            delete oldTileset.isCenter
            const { alt: oldAlt } = oldTileset.position
            const { position, heading } = res
            if (Cesium.defined(position)) {
                const { lng, lat, alt } = mars3d.LngLatPoint.fromCartesian(position)
                Editor.position = mars3d.PointUtil.setPositionsHeight(position, oldAlt)
                oldTileset.position = { lng, lat, alt }
                Map.getLayerById(uuid).setOptions(oldTileset)
            }
            if (Cesium.defined(heading)) {
                oldTileset.rotation.z = heading
                Map.getLayerById(uuid).setOptions(oldTileset)
            }
        }
    })
    const TilesEditorEnd = (uuid) => {
        console.log('模型编辑结束', uuid)
        console.log(Map.getLayerById(uuid))
        Editor.enabled = false
        setEditor()
        MapEvent.emit({ type: 'stopDraw', data: { obj: Element, uuid } })
    }
    const AddGrouping = (gro) => {
        posGrouping(JSON.stringify(JSON.stringify(gro))).then(() => {
            message.success('分组操作成功!')
            setGrouping(gro)
            MapEvent.emit({ type: 'getDetails', data: Element, gro })
        })
    }
    const DelGrouping = (uuid) => {
        delete Grouping[uuid]
        AddGrouping(Grouping)
    }
    const PutEleGro = (data) => {
        const { key, uuid, str } = data
        Grouping[key].children = Grouping[key].children.filter(v => v !== uuid)
        Grouping[str].children.push(uuid)
        AddGrouping(Grouping)
    }
    MapEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'scene') MarsScene(data)
        if (type === 'center') MarsCenterAt(data)
        if (type === 'getCenter') MarsGetCenter(data)
        if (type === 'details') Details(data)
        if (type === 'addDetails') AddDetails(data)
        if (type === 'startDraw') StartDraw(data)
        if (type === 'startEditing') StartEditing(data)
        if (type === 'stopEditing') StopEditing(data)
        if (type === 'posDetails') PosDetails(data)
        if (type === 'isEnable') IsEnable(data)
        if (type === 'delDetail') DelDetail(data)
        if (type === 'copyDetails') CopyDetails(data)
        if (type === 'location') LocationAt(data)
        if (type === 'addKML') AddKml(data)
        if (type === 'addTileset') AddTileset(data)
        if (type === 'tilesEditor') TilesEditorSta(data)
        if (type === 'tilesEditorEnd') TilesEditorEnd(data)
        if (type === 'addGrouping') AddGrouping(data)
        if (type === 'delGrouping') DelGrouping(data)
        if (type === 'putEleGro') PutEleGro(data)
        if (type === 'importElement') ImportElement(data)
    })

    const GetScene = () => {
        getData().then(res => {
            if (res.data === '文件不存在') {
                posData(JSON.stringify(JSON.stringify(defaultParams))).then(() => {
                    posGrouping(JSON.stringify(JSON.stringify(elementGrouping))).then(() => {
                        posDetails(JSON.stringify(JSON.stringify({}))).then(() => {
                            setElement({})
                            Init(defaultParams, {}, elementGrouping)
                            setGrouping(elementGrouping)
                        })
                    })
                })
            } else {
                getGrouping().then(gro => {
                    getDetails().then(ele => {
                        Init(res, ele, gro)
                        setElement(ele)
                        setGrouping(gro)
                    })
                })
            }
        })
    }
    useMount(GetScene)
    useEffect(() => { return () => { if (Map) Map.destroy() } }, [Map])
    return <div className="Mars3dMap" ref={MapBox} />
}
export const Mars3dTop = ({ MapEvent }) => {
    Mars3dTop.propTypes = { MapEvent: PropTypes.object }

    // 地图配置
    const [Scene, setScene] = useSetState({})
    const [Element, setElement] = useState()
    const [Grouping, setGrouping] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    MapEvent.useSubscription(val => {
        const { type } = val
        if (type === 'getScene') {
            setScene(val.scene)
            setElement(val.data)
        }
        if (type === 'getDetails') setGrouping(val.gro)
    })

    const onClick = (value, label) => {
        const type = {
            Mars3dAddEle: { type: value, title: label, data: { obj: Element, gro: Grouping }, close: true },
            Mars3dAddKML: { type: value, title: label, data: { obj: Element, gro: Grouping }, close: true },
            Mars3dAddBIM: { type: value, title: label, data: { obj: Element, gro: Grouping }, close: true },
            Mars3dAddGro: { type: value, title: label, data: { obj: Grouping, type: 'add' }, close: true },
            Mars3dOthA03: { type: value, title: label, data: { obj: Element, gro: Grouping }, close: true },

            other: { type: value, title: label, data: Scene, cose: true },
        }
        if (type[value]) setOptionsCall(type[value])
        else setOptionsCall(type.other)
    }

    return (
        <div className="Mars3dTop">
            {Object.keys(toolbar).map(key => (
                <div key={key} className={key}>
                    {toolbar[key].map(({ value, label, icon }) =>
                        <div key={value} onClick={() => onClick(value, label)}>{icon}{label}</div>)
                    }
                </div>
            ))}
            <DrawerBox OptionsCall={OptionsCall} ModalEvent={MapEvent} />
        </div>
    )
}
export const Mars3dList = ({ MapEvent }) => {
    Mars3dList.propTypes = { MapEvent: PropTypes.object }

    const [Grouping, setGrouping] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    const [loading, setLoading] = useState(true)

    MapEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'getDetails') CreateGroups(val.gro, data)
        if (type === 'closeDetails') setLoading(false)
    })

    const onLocation = (uuid) => MapEvent.emit({ type: 'location', data: uuid })
    const onEnable = (uuid, isEnable, obj) => {
        obj[uuid].isEnable = !isEnable
        MapEvent.emit({ type: 'isEnable', data: { obj, uuid } })
    }
    const onDetails = (uuid, obj) => {
        setLoading(true)
        MapEvent.emit({ type: 'openDetails', data: { obj, uuid } })
    }
    const onCopy = (uuid, obj, key) => MapEvent.emit({ type: 'copyDetails', data: { obj, uuid, key } })

    const onModify = (uuid, obj) => setOptionsCall({ type: 'Mars3dPutEle', title: '修改参数', data: { obj, uuid }, close: true })
    const onDelete = (uuid, data, key) => MapEvent.emit({ type: 'delDetail', data: { data, uuid, key } })
    // !
    const onUpload = (uuid, obj) => {
        setOptionsCall({ type: 'Mars3DUploadEle', title: '上传到公共库', data: { uuid, obj }, close: true })
    }
    const ElementDemo = (data, obj, UUID, options) => {
        const newData = data.map(key => obj[key]).sort((a, b) => a.sortId - b.sortId).filter(element => element !== undefined)

        return (
            <>
                {newData.map(({ uuid, title, isEnable, type }) =>
                    <div key={uuid}>
                        <div>({elementMapping[type].typeName}) <br /> {title}</div>
                        <div>
                            <Tooltip title="定位" onClick={() => onLocation(uuid)}>
                                <AimOutlined />
                            </Tooltip>
                            <Tooltip title={isEnable ? '隐藏' : '显示'} onClick={() => onEnable(uuid, isEnable, obj)}>
                                {isEnable ? <EyeOutlined /> : <EyeInvisibleOutlined style={{ color: '#ccc' }} />}
                            </Tooltip>
                            <Tooltip title="详情" onClick={() => onDetails(uuid, obj)}>
                                <SlidersOutlined />
                            </Tooltip>
                            <Tooltip title="同步元素" onClick={() => onUpload(uuid, obj)}>
                                <UploadOutlined />
                            </Tooltip>
                            {type !== 'kml' && type !== 'tileset' &&
                                <Tooltip title="修改信息" placement="bottom" onClick={() => onModify(uuid, obj)}>
                                    <EditOutlined />
                                </Tooltip>
                            }
                            <Popover
                                title="选择分组"
                                trigger="click"
                                content={
                                    <Select
                                        defaultValue={UUID}
                                        style={{ width: 240 }}
                                        options={options}
                                        onChange={e => MapEvent.emit({ type: 'putEleGro', data: { key: UUID, uuid, str: e } })}
                                    />
                                }
                            >
                                <Tooltip title="修改分组" placement="bottom" >
                                    <FieldNumberOutlined />
                                </Tooltip>
                            </Popover>
                            {type !== 'tileset' && type !== 'kml' &&
                                <Tooltip title="复制" placement="bottom" onClick={() => onCopy(uuid, obj, UUID)}>
                                    <CopyOutlined />
                                </Tooltip>
                            }
                            <Popconfirm
                                title="删除确认"
                                description="删除后数据不可恢复?"
                                onConfirm={() => onDelete(uuid, obj, UUID)}
                                okText="删除"
                                cancelText="取消"
                            >
                                <Tooltip title="删除" placement="right" color='#ff4d4f'>
                                    <DeleteOutlined style={{ color: '#ff4d4f' }} />
                                </Tooltip>
                            </Popconfirm>
                        </div>
                    </div>
                )}
            </>
        )
    }
    const genExtra = (uuid, length, obj) => (
        <>
            <Tooltip title="修改信息" onClick={e => {
                e.stopPropagation()
                setOptionsCall({ type: 'Mars3dAddGro', title: '修改分组', data: { obj, type: 'put', uuid }, close: true })
            }}>
                <EditOutlined />
            </Tooltip>
            {uuid !== '00000000-0000-0000-0000-000000000000' && length === 0 &&
                <Popconfirm
                    title="删除分组"
                    description="删除后数据不可恢复?"
                    onConfirm={() => MapEvent.emit({ type: 'delGrouping', data: uuid })}
                    okText="删除"
                    cancelText="取消"
                >
                    <Tooltip title="删除" placement="right" color='#ff4d4f'>
                        <DeleteOutlined style={{ color: '#ff4d4f' }} />
                    </Tooltip>
                </Popconfirm>
            }
        </>
    )
    const CreateGroups = (data, obj) => {
        const newObj = JSON.parse(JSON.stringify(data))
        const newArr = Object.keys(newObj).map(item => (newObj[item]))
        const newData = newArr.sort((a, b) => a.sort - b.sort)
        const options = newData.map(item => ({ label: item.label, value: item.key }))
        newData.map(item => {
            item.extra = genExtra(item.key, item.children.length, data)
            item.children = ElementDemo(item.children, obj, item.key, options)
        })
        setGrouping(newData)
    }
    return (
        <div className="Mars3dList">
            <Spin spinning={loading}>
                {Grouping &&
                    <Collapse
                        ghost
                        items={Grouping}
                        className='CollList'
                        expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
                    />
                }
            </Spin>
            <DrawerBox OptionsCall={OptionsCall} ModalEvent={MapEvent} />
        </div>
    );
}
export const Mars3dDetails = ({ MapEvent }) => {
    Mars3dDetails.propTypes = { MapEvent: PropTypes.object }
    const [Obj, setObj] = useState()
    const [Data, setData] = useState()
    const [Uuid, setUuid] = useState()
    const [MappingList, setMappingList] = useState()
    const [MappingTitle, setMappingTitle] = useState()
    const [Loading, setLoading] = useState(false)

    MapEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'openDetails') {
            const { obj, uuid } = data
            const { typeName, list } = elementMapping[obj[uuid].type]
            setObj(obj)
            setUuid(uuid)
            setData(obj[uuid])
            setMappingTitle(typeName)
            setMappingList(list.map(obj => ({ ...obj, uuid })))
        }
        if (type === 'stopDraw') {
            const { obj, uuid } = data
            setLoading(false)
            setObj(obj)
            setData(obj[uuid])
        }
    })
    const onSubmit = () => MapEvent.emit({ type: 'posDetails', data: { data: Obj, uuid: Uuid } })
    const onClose = () => {
        setObj()
        setData()
        setUuid()
        setMappingList()
        setMappingTitle()
        MapEvent.emit({ type: 'closeDetails' })
    }
    const onMap = () => {
        const { type, uuid, title, ...style } = Data
        if (type === 'tileset') {
            setLoading(true)
            MapEvent.emit({ type: Loading ? 'tilesEditorEnd' : 'tilesEditor', data: uuid })
        } else {
            if (!Loading) {
                setLoading(true)
                if (Data?.coordinates) MapEvent.emit({ type: 'startEditing', data: uuid })
                else MapEvent.emit({ type: 'startDraw', data: { type, style, id: uuid, attr: title } })
            } else MapEvent.emit({ type: 'stopEditing', data: uuid })
        }
    }
    if (Data && MappingList) {
        return (
            <div className="Mars3dDetails">
                <div className='Mars3dDetails__Box'>
                    <div className='Box__Top'>
                        <div>{Data.title}({MappingTitle})</div>
                        {Data.type !== 'kml' &&
                            <Button icon={!Loading ? <EditOutlined /> : <StopOutlined />} onClick={onMap} />
                        }
                    </div>
                    <div className='Box_List'>
                        {UseConfigSection(Obj, MappingList)}
                    </div>
                </div>
                <div className='Button'>
                    <Button type='primary' loading={Loading} block danger onClick={onClose}>关闭</Button>
                    <Button type='primary' loading={Loading} block onClick={onSubmit}>保存</Button>
                </div>
            </div>
        )
    }
}
